<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="UTF-8"> 	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" content="佰维网络科技有限公司 http://www.100vic.com">
	<title>百度外卖</title>
	<!-- rem实现适配 -->
	<script>
		// 页面打开 立即计算
		document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px';
		// 页面发生改变， 重新计算
		window.onresize = function() {
			document.querySelector('html').style.fontSize = window.screen.width / 20 + 'px';
		}
	</script>
	<!-- swiper css -->
	<!-- 为了 降低 请求的 次数 把swiper的样式也合并 -->
	<!--<link rel="stylesheet" type="text/css" href="lib/swiper/swiper.min.css" />-->
	
	<!-- 在 swiper的样式后面导入 避免 出现覆盖问题 -->
	<link rel="stylesheet" type="text/css" href="css/index.css" />
    
</head>
<body>
	
	<!-- 音乐播放 -->
	<div class="music-box rotate">
		<audio id="music" src="music/music.mp3" loop autoplay preload></audio>
	</div>
	<!-- loading页面 -->
	<div class="loading">
		<div class="rider"></div>
		<div class="progress">
			<div class="step"></div>
		</div>
		<div class="info"></div>
		<!-- 外卖的logo -->
		<div class="logo"></div>
		<!-- 版权信息 -->
		<div class="copyright">
			@ 2019 Baidu Waimai Produced
		</div>
	</div>
	<!-- welcome页面 -->
	<div class="welcome">
		<div class="info">
			<div class="hello"></div>
		</div>
		<div class="cloud"></div>
		<div class="grass1"></div>
		<div class="bear-box">
			<div class="bear"></div>
			<div class="smoke"></div>
		</div>
		<div class="trees"></div>
		<div class="grass2"></div>
		<div class="rotate-btn-box">
			<div class="btn"></div>
			<div class="circle1"></div>
			<div class="circle2"></div>
		</div>
	</div>
    <!--swiper的结构-->
	<div class="waimai-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide page1">
				<div class="title">
					<i class="line"></i>
					<h3>生活中,</h3>
					<p>经常有这种时候...</p>
				</div>
				<div class="scroll-page1">
					<div class="bg"></div>
					<div class="person">
						<div class="files">
							<div class="paper1"></div>
							<div class="paper2"></div>
						</div>
					</div>
					<div class="message-container">
						<div class="info"></div>
					</div>
				</div>
				<div class="scroll-page2">
					<div class="bg"></div>
					<div class="person">
						<div class="leg1"></div>
						<div class="leg2"></div>
					</div>
					<div class="message-container">
						<div class="info"></div>
					</div>
				</div>
				<div class="scroll-page3">
					<div class="bg"></div>
					<div class="person">
						<div class="word1"></div>
						<div class="word2"></div>
						<div class="word3"></div>
						<div class="word4"></div>
					</div>
					<div class="message-container">
						<div class="info"></div>
					</div>
				</div>
				<div class="sphere"></div>
				<div class="bear"></div>
			</div>
			<div class="swiper-slide page2">
				<div class="title">
					<i class="line"></i>
					<h3>这时候,</h3>
					<p>如果有一份美味外卖...<br>正好出现...</p>
				</div>
				<div class="bg"></div>
				<div class="bear">
					<div class="face1"></div>
					<div class="face2"></div>
					<div class="hand-left"></div>
					<div class="hand-right"></div>
				</div>
				<div class="sphere"></div>
				<div class="table"></div>
				<div class="food"></div>
			</div>
			<div class="swiper-slide page3">
				<div class="title">
					<i class="line"></i>
					<h3>那时候,</h3>
					<p>如果一碗蛋炒饭...<br>刚好送到</p>
				</div>
				<div class="bg"></div>
				<div class="bear"></div>
				<div class="animation-bear-box">
					<div class="animate-bear1"></div>
					<div class="animate-bear2"></div>
					<div class="animate-bear3"></div>
				</div>
				<div class="sphere"></div>
				<div class="normal-card">
					<div class="license"></div>
					<div class="oil"></div>
					<div class="evil"></div>
				</div>
				<div class="hit-card-box">
					<div class="card1"></div>
					<div class="card2"></div>
					<div class="card3"></div>
				</div>
			</div>
			<div class="swiper-slide page4">
				<div class="title">
					<i class="line"></i>
					<h3>百度外卖</h3>
					<p>做只有品质的外卖...<br>操作快捷...</p>
				</div>
				<div class="bg"></div>
				<div class="bear"></div>
				<div class="sphere"></div>
				<div class="card1"></div>
				<div class="card2"></div>
				<div class="card3"></div>
			</div>
			<div class="swiper-slide page5">
				<div class="title">
					<i class="line"></i>
					<h3>无论前方,</h3>
					<p>狂风、大雨、还是飘雪...<br>始终坚持在路上...</p>
				</div>
				<div class="bg"></div>
				<div class="bear">
					<div class="smoke"></div>
				</div>
				<div class="sphere"></div>
				<div class="cloud">
					<div class="snow"></div>
					<div class="snow"></div>
					<div class="snow"></div>
					<div class="snow"></div>
					<div class="snow"></div>
					<div class="snow"></div>
				</div>
			</div>
			<div class="swiper-slide page6">
				<div class="title">
					<i class="line"></i>
					<h3>丰富礼品,</h3>
					<p>让你边吃边省钱...</p>
				</div>
				<div class="bg"></div>
				<div class="bear">
					<div class="gift-box">
						<div><div class="gift1"></div></div>
						<div><div class="gift2"></div></div>
						<div><div class="gift3"></div></div>
						<div><div class="gift4"></div></div>
						<div><div class="gift5"></div></div>
						<div><div class="gift6"></div></div>
						<div><div class="gift7"></div></div>
						<div><div class="gift8"></div></div>
						<div><div class="gift9"></div></div>
						<div><div class="gift10"></div></div>
						<div><div class="gift11"></div></div>
						<div><div class="gift12"></div></div>
					</div>
				</div>
				<div class="sphere"></div>
			</div>
			<div class="swiper-slide page7">
				<div class="title">
					<i class="line"></i>
					<h3>所有的努力,</h3>
					<p>就是为了健康美味的外卖...<br>呈现给你...</p>
				</div>
				<div class="sphere"></div>
				<div class="streetlight">
					<div class="light"></div>
				</div>
				<div class="motobike"></div>
				<div class="bear"></div>
				<div class="share bdsharebuttonbox">
					<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
				</div>
				<div class="info">waimai.baidu.com</div>
			</div>
		</div>
	</div>
         
</body>
</html>

<!-- swiper的js -->
<script type="text/javascript" src="lib/swiper/swiper.min.js"></script>
<!-- zepto的js -->
<script type="text/javascript" src="lib/zepto/zepto.js"></script>
<script type="text/javascript" src="lib/zepto/event.js"></script>
<script type="text/javascript" src="lib/zepto/touch.js"></script>
<script type="text/javascript" src="lib/zepto/fx.js"></script>
<script type="text/javascript" src="lib/zepto/fx_methods.js"></script>

<!-- 调用swiper -->
<script type="text/javascript">
	var swiper = new Swiper('.waimai-container',{
		direction: 'vertical',
		mousewheelControl : true,
		onSlideChangeEnd: function(){
			//alert(swiper.activeIndex);
			$('.swiper-slide').eq(swiper.activeIndex).addClass('animate').siblings().removeClass('animate');
			
			// 判断是否 滑动到了 第三页 索引为 2
			if(swiper.activeIndex == 2){
				console.log('哥们，别滑了');
				$('.swiper-slide').eq(2).addClass('swiper-no-swiping');
			}
			
			// 获取 我们上一页的 索引值
			console.log(swiper);
			if(swiper.previousIndex==2){
				console.log('说明用户 刚刚看完了 第三页 索引为2的那一页');
				
				// 还原我们设置的 所有行内样式
				$('.swiper-slide').eq(2).find('.bear').attr('style','');
				$('.animation-bear-box div').attr('style','');
				$('.normal-card div').attr('style','');
				$('.hit-card-box div').attr('style','');
			}
		}
	})
	
	// 1.页面打开 稍等一会 开启定时器
	$(function(){
		// 1、第一页的js效果
		setTimeout(function(){
			$('.loading').addClass('animate');
			// 使用js的方式演示
			/*document.querySelector('.loading .step').addEventListener('animationend',function(){
				console.log('我播完了');
			})*/
			// Jq绑定方式
			$('.loading .step').on('animationend',function(){
				$('.loading').fadeOut(1000,function(){
					$('.welcome').addClass('animate');
					
				});
				//console.log('我播完了');
			})
		},1000);
		
		// 2、第二页的js效果
		$('.welcome .rotate-btn-box').longTap(function(){
			console.log('触发了');
			/*$('.bear-box').animate({
				transform: 'translateY(100%)',
				opacity: 0
			},1000,function(){
				console.log('结束了');
			});*/
			$('.bear-box').css('animation','bearDisappear 1s forwards');
			setTimeout(function(){
				$('.welcome').fadeOut(1000,function(){
					// 为swiper第一页添加animate class
					$('.page1').addClass('animate');
				});
			},1000);
		})
		
		// swiper的 第三页 索引为2
		$('.swiper-slide').eq(2).click(function(){
			console.log('你点我了');
			$(this).removeClass('swiper-no-swiping');
			// 把中间的熊给隐藏
			$('.swiper-slide').eq(2).children('.bear').css('animation','none');
			var index = 0;
			interId = setInterval(function(){
				// t牌子 1 2 3
				$('.animation-bear-box div').css('opacity',0);
				$('.animation-bear-box div').eq(index).css('opacity',1);
				
				// 隐藏 normal-card 容器中的牌子
				$('.normal-card div').eq(index).css('animation','none');
				
				// t的同时 把 card的显示 进行切换
				$('.hit-card-box div').eq(index).css('opacity',1);
				
				// 当index ==2时 就开始t最后一张
				if(index==2){
					clearInterval(interId);
					// 往下掉
					// 没有效果 animate 使用的是 transition 动画 混用
					$('.hit-card-box div').css('animation','bearDisappear 1s forwards');
					// 掉完了 开启 滑动
					setTimeout(function(){
						$('.swiper-slide').eq(2).removeClass('swiper-no-swiping');
					},1000);
				}
				
				// index 要累加
				index++;
			},1000)
		})
		
		// 音乐播放
		var audio = document.getElementById('music');
		$('.music-box').click(function(){
			if(!$(this).hasClass('on')){
				$(this).addClass('on');
				$(this).css({'animation-play-state':'paused'});
				audio.pause(); //这个就是暂停
			}else{
				$(this).removeClass('on');
				$(this).css({'animation-play-state':'running'});
				audio.play(); // 这个就是播放
				//audio.currentTime = 0; //从零开始播放
			}
		});
		
	})
	
	// 百度分享
	window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>